<?xml version="1.0" charset="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">

#imap {
 display:block;
 width:300px;
 height:210px;
 background:url(bassano_back.jpg) no-repeat;
 position:relative;
 margin:10px 0 10px 75px;
}

#imap a#painting {
 display:block;
 width:300px;
 height:0;
 padding-top:210px;
 overflow:hidden;
 position:absolute;
 left:0;
 top:0;
 background:transparent url(bassano_small.jpg) no-repeat 300px 210px;
 cursor:default;
}

* html #imap a#painting {
 height:210px;
 he\ight:0;
}

#imap a#painting:hover {
 background-position: 0 0;
 z-index:10;
}

#imap dd {
 position:absolute;
 padding:0;
 margin:0;
}
#imap #man {
 left:10px;
 top:50px;
 z-index:20;
}
#imap #donkey {
 left:120px;
 top:80px;
 z-index:20;
}
#imap #child {
 left:190px;
 top:20px;
 z-index:20;
}

#imap a#link_man {
 display:block;
 width:58px;
 height:58px;
 text-decoration:none;
 z-index:20;
}
#imap a#link_donkey {
 display:block;
 width:58px;
 height:68px;
 text-decoration:none;
 z-index:20;
}
#imap a#link_child {
 display:block;
 width:48px;
 height:88px;
 text-decoration:none;
 z-index:20;
}

#imap a em {
 display:none;
}

#imap a span, #imap a:visited span {
 display:none;
}

#imap a#link_man:hover, #imap a#link_donkey:hover, #imap a#link_child:hover {
 border:1px solid #fc0;
}

#imap a:hover span {
 position:absolute;
 display:block;
 color:#000;
 width:330px;
 height:270px;
 line-height:1.8em;
 font-size:0.9em;
 text-align:justify;
}

#imap a#link_man:hover span {
 left:310px;
 top:-50px;
}
#imap a#link_man:hover em {
 position:absolute;
 display:block;
 left:60px;
 top:30px;
 width:250px;
 height:1px;
 overflow:hidden;
 font-size:1px;
 background:#f00;
}
#imap a#link_donkey:hover span {
 left:200px;
 top:-80px;
}
#imap a#link_donkey:hover em {
 position:absolute;
 display:block;
 left:60px;
 top:35px;
 width:140px;
 height:1px;
 overflow:hidden;
 font-size:1px;
 background:#f00;
}
#imap a#link_child:hover span {
 left:130px;
 top:-20px;
}
#imap a#link_child:hover em {
 position:absolute;
 display:block;
 left:50px;
 top:45px;
 width:80px;
 height:1px;
 overflow:hidden;
 font-size:1px;
 background:#f00;
}

#imap a:hover span img {
 float:left;
 margin-right:1em;
 margin-bottom:0.5em;
 border:1px solid #000;
}

#imap a span:first-line {
 font-weight:bold;
 font-style:italic;
}
#info h3 {
 margin:0 0 0 75px;
 font-size:1.2em;
 font-weight:normal;
 font-family:georgia, "times new roman", serif;
 letter-spacing:0.1em;
 padding-bottom:5px;
 border-bottom:1px solid #aaa;
 width:650px;
}

#info .para {
 width:300px;
 margin:0 0 0 75px;
}


</style>
<body>
<div id="info">
<h3>Jacopo Bassano - The Flight into Egypt</h3>
<dl id="imap">
<dt><a id="painting" href="#nogo" title="Old Master">An Old Master</a></dt>
<dd id="man"><a id="link_man" title="Old Man" href="#nogo"><em></em><span>Lorem ipsum dolor sit amet,</span></a></dd>
<dd id="donkey"><a id="link_donkey" title="Donkey" href="#nogo"><em></em><span>Cras pulvinar nisl a magna...</span></a></dd>
<dd id="child"><a id="link_child" title="Mother and Child" href="#nogo"><em></em><span>Suspendisse vestibulum convallis sem..</span></a></dd>
</dl>
<p class="para">Jacopo Bassano's popular realism was underpinned by his exceptional use of light and characterized by the lifelike quality of the people and details, especially the animals, in his pictures.</p>

<br /><br /><br />

</div> <!-- end of info -->
</body>
</html>
